<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link href="${ctx }/bt/css/jquery.Jcrop.min.css" rel="stylesheet">
<script src="${ctx }/bt/js/jquery.color.js"></script>
<script src="${ctx }/bt/js/jquery.Jcrop.min.js"></script>
<style>
<!--
#preview-pane .preview-container {
  width: 48px;
  height: 48px;
  overflow: hidden;
}
#preview-pane {
  position: absolute;
  top:300px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;
}
-->
</style>
<script type="application/javascript">
$(function () {
	 //$('#target').Jcrop();
	 
	 
	 var jcrop_api,
     boundx,
     boundy,

     // Grab some information about the preview pane
     $preview = $('#preview-pane'),
     $pcnt = $('#preview-pane .preview-container'),
     $pimg = $('#preview-pane .preview-container img'),

     xsize = $pcnt.width(),
     ysize = $pcnt.height();
 
 console.log('init',[xsize,ysize]);
 $('#target').Jcrop({
   onChange: updatePreview,
   onSelect: updatePreview,
   aspectRatio: xsize / ysize,
   maxSize:[48,48],
   minSize:[48,48]
 },function(){
   // Use the API to get the real image size
   var bounds = this.getBounds();
   boundx = bounds[0];
   boundy = bounds[1];
   // Store the API in the jcrop_api variable
   jcrop_api = this;

   // Move the preview into the jcrop container for css positioning
   $preview.appendTo(jcrop_api.ui.holder);
 });

 function updatePreview(c)
 {

   if (parseInt(c.w) > 0)
   {
		 $("#x").val(c.x);
	     $("#y").val(c.y);
	     $("#w").val(c.w);
	     $("#h").val(c.h);
     var rx = xsize / c.w;
     var ry = ysize / c.h;

     $pimg.css({
       width: Math.round(rx * boundx) + 'px',
       height: Math.round(ry * boundy) + 'px',
       marginLeft: '-' + Math.round(rx * c.x) + 'px',
       marginTop: '-' + Math.round(ry * c.y) + 'px'
     });
   }
 };
	 
    $('#BirthDiv').datetimepicker({
        language: 'zh-CN',
        autoclose: 1,
        todayBtn: 1,
        pickerPosition: "bottom-left",
        minuteStep: 5,
        format: 'yyyy-mm-dd',
        minView: 'month'　　　　//日期时间选择器所能够提供的最精确的时间选择视图。
    });
});

function saveImg(){
	console.debug("====>")
	$("#crop_form").submit();
}
</script>
<div class="col-md-8 col-sm-10 ">
	<!-- 帖子列表 -->
	<c:if test="${not empty updateBaseInfo }">
	<div class="panel panel-default">
		<div class="panel-heading">完善信息 - 基础信息</div>
		<div class="panel-body">
			<form class="form-horizontal" action="" method="post">
				<div class="form-group">
					<label class="col-md-2 control-label">用户名:</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="username"
							placeholder="登陆BBS的用户名(10个中文字以内)" value=${user.username } readonly="readonly">
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label">电子邮箱:</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="email"
							placeholder="用于找回密码的电子邮箱" value=${user.email }>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label">手机号码:</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="email"
							placeholder="用于验证用户的手机号码" value=${user.phone }>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label">QQ号码:</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="email"
							placeholder="常用QQ的号" value=${user.qq }>
					</div>
				</div>
				
				<div class="form-group">
					<label class="control-label col-md-2"> 出生日期:</label>
					<div class="col-md-10">
						<div id="BirthDiv" class="input-group date form_datetime" data-date="1980-01-01" data-date-format="yyyy-mm-dd">
							<input type="text" placeholder="真实的出生日期"  id="datetimepicker" class="form-control" readonly="readonly" style="background-color: white;" value=${user.birthday }>
							<span class="input-group-addon">
								<span class="glyphicon glyphicon-th"></span> 
							</span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label class="col-md-2 control-label">个人主页:</label>
					<div class="col-md-10">
						<input type="text" class="form-control" id="email"
							placeholder="宣传自己的个人主页" value=${user.homepage}>
					</div>
				</div>

				<div class="text-center">
					<button type="submit" class="btn btn-default">完成</button>
					<button type="submit" class="btn btn-default">清空</button>
				</div>
			</form>
		</div>
	</div>
	</c:if>
	<c:if test="${not empty updateHeadImg }">
	<div class="panel panel-default">
        <div class="panel-heading">完善资料 - 设置头像 - 未完成

        </div>
        <div class="panel-body">
            <form class="form-horizontal" action="${ctx }/bbs/updateHeadImg" method="post" id="crop_form">
                <div class="form-group">
                    <label class="col-md-2 control-label">头像:</label>
                    <div class="col-md-10">
                        <img src="${ctx }/img/a.jpg" id="target" class="img-responsive" alt="[Jcrop Example]" />
                    </div>
                    <div class="clearfix help-block"></div>
                    <label class="col-md-2 control-label">预览:</label>
                    <div class="col-md-10 ">
							<div id="preview-pane">
								<div class="preview-container">
									<img src="${ctx }/img/a.jpg" class="img-responsive" alt="Preview" />
								</div>
							    <input type="hidden" id="bigImage" name="imgUrl" value="${ctx }/img/a.jpg"/>
							    <input type="hidden" id="x" name="x" />
							    <input type="hidden" id="y" name="y" />
							    <input type="hidden" id="w" name="w" />
							    <input type="hidden" id="h" name="h" />
							    <!-- <P><input type="button" value="确认" id="crop_submit"/></P> -->
							</div>
						</div>
                    
                </div>


                <div class="text-center">
                    <button type="submit" class="btn btn-default" onclick="saveImg();">保存头像</button>
                    <button type="submit" class="btn btn-default">清空</button>
                </div>
            </form>
        </div>
    </div>
    </c:if>
    <c:if test="${not empty updatePassword }">
    <div class="panel panel-default">
        <div class="panel-heading">完善资料 - 修改密码

        </div>
        <div class="panel-body">
            <form class="form-horizontal" action="${ctx }/user/updatePassword" method="post">
                <div class="form-group">
                    <label class="col-md-2 control-label">原始密码:</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="oldPassword" name="oldPassword" placeholder="最后一次登陆的密码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">新密码:</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="newPassword" name="newPassword" placeholder="新的密码">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 control-label">重复新密码:</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" id="newPassword2" name="newPassword2" placeholder="再次输入新密码">
                    </div>
                </div>
                <div class="text-center">
                    <button type="submit" class="btn btn-default">保存</button>
                    <button type="submit" class="btn btn-default">清空</button>
                </div>
            </form>
        </div>
    </div>
    </c:if>
</div>